import React from 'react';
import { Tag, Drawer, FloatButton } from 'antd';
import ReactECharts from 'echarts-for-react';
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
//import { useGetbeginmonitorexcuteQuery } from '../../store/request/datamonitorrequests/beginmonitorrequest';
import { QuestionCircleOutlined } from '@ant-design/icons';
import './BeginMonitor.css';
import './flexible.js';
import * as signalR from '@microsoft/signalr';
import { Util } from '../../utilityjs/timer.js'
import { useGetquartzstartexcuteQuery } from '../../store/request/datamonitorrequests/quartzrequest.js';
import { usePosttotalmileagesMutation } from '../../store/request/datamonitorrequests/totalmileagesrequest.js';
import { usePosttotalgpsMutation } from '../../store/request/datamonitorrequests/totalgpsrequest.js';


const BeginMonitor = () => {
  //const navigate = useNavigate();//获取navigateapi
  const [draweropen, setDrawerOpen] = useState(false);
  const [buttonopen, setbuttonOpen] = useState(false);
  const [loginfo, setLoginfo] = useState("");

  const location = useLocation();//获取地址api的参数
  const path = location.search.split("=")[1];
  //获取从父页面存储的选择的行数据
  const userprop = localStorage.getItem(path);

  const userlist = userprop.split(';');
  //这个是每个图的系列名称

  const chart1chantitle = userlist[9]?.split(',');
  const chart2chantitle = userlist[10]?.split(',');
  const chart3chantitle = userlist[11]?.split(',');
  const chart4chantitle = userlist[12]?.split(',');
  const chart5chantitle = userlist[13]?.split(',');
  const chart6chantitle = userlist[14]?.split(',');
  //获取日志监控路径
  const logpath = userlist[15];
  //把监控路径和日志路径放在一个字符串中传回到后端
  const paths = path + ';' + logpath;
  //会执行2次
  //console.log("组件一开始");

  //signalr
  const [hubConnection, setHubConnection] = useState(null);
  const [showtime, setShowTime] = useState("2020年3月17日-0时54分14秒");

  const [filename, setfilname] = useState("");
  const [count, setcount] = useState(0);
  const [mileage, setmileage] = useState(0);
  const [spdavg, setspdavg] = useState(0);

  // const [address, setaddress] = useState("");

  const [chart1chan1, setchart1chan1] = useState([]);
  const [chart1chan2, setchart1chan2] = useState([]);
  const [chart1chan3, setchart1chan3] = useState([]);
  const [chart1chan4, setchart1chan4] = useState([]);

  const [chart2chan1, setchart2chan1] = useState([]);
  const [chart2chan2, setchart2chan2] = useState([]);
  const [chart2chan3, setchart2chan3] = useState([]);
  const [chart2chan4, setchart2chan4] = useState([]);

  const [chart3chan1, setchart3chan1] = useState([]);
  const [chart3chan2, setchart3chan2] = useState([]);
  const [chart3chan3, setchart3chan3] = useState([]);
  const [chart3chan4, setchart3chan4] = useState([]);

  const [chart4chan1, setchart4chan1] = useState([]);
  const [chart4chan2, setchart4chan2] = useState([]);
  const [chart4chan3, setchart4chan3] = useState([]);
  const [chart4chan4, setchart4chan4] = useState([]);

  const [chart5chan1, setchart5chan1] = useState([]);
  const [chart5chan2, setchart5chan2] = useState([]);
  const [chart5chan3, setchart5chan3] = useState([]);
  const [chart5chan4, setchart5chan4] = useState([]);

  const [chart6chan1, setchart6chan1] = useState([]);
  const [chart6chan2, setchart6chan2] = useState([]);
  const [chart6chan3, setchart6chan3] = useState([]);
  const [chart6chan4, setchart6chan4] = useState([]);

  //传到后端QuartzController的AddandStartJob方法来开启定时任务
  useGetquartzstartexcuteQuery({ jobname: paths });
  const [mileagetrigger] = usePosttotalmileagesMutation();
  const [gpstrigger] = usePosttotalgpsMutation();
  useEffect(() => {

    setInterval(() => {
      const sysTime = Util.formateDate(new Date().getTime());
      setShowTime(sysTime)
    }, 1000)
  }, [])
  //打开抽屉显示log错误信息函数
  const openDrawer = () => {
    setDrawerOpen(true);
  }
  //关闭抽屉
  const onDrawerClose = () => {
    setDrawerOpen(false);
    setbuttonOpen(false);
  }
  useEffect(() => {
    const newConnection = new signalR.HubConnectionBuilder().withUrl(`${window.app}SiginalrHub`).withAutomaticReconnect().build();
    newConnection.serverTimeoutInMilliseconds = 30000;
    newConnection.keepAliveIntervalInMilliseconds = 15000;
    setHubConnection(newConnection);
    window.map = new window.BMapGL.Map('MapContainer');
    const pointer = new window.BMapGL.Point(119.3434, 30.84733);
    window.map.centerAndZoom(pointer, 12);
    window.map.enableScrollWheelZoom(true);

    window.caricon = new window.BMapGL.Icon(require('../../assets/car_red.png'), new window.BMapGL.Size(52, 26), { anchor: new window.BMapGL.Size(27, 13) });

    {
      //定义一个控件类
      function RecoverControl() {
        this.defaultAnchor = window.BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new window.BMapGL.Size(20, 20)
      }
      //通过JavaScript的prototype属性继承于BMap.Control
      RecoverControl.prototype = new window.BMapGL.Control();
      //console.log(RecoverControl.prototype);
      // RecoverControl.prototype.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;
      //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
      //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
      RecoverControl.prototype.initialize = function (map) {
        //创建一个dom元素
        let div = document.createElement('div');
        //添加文字说明
        div.appendChild(document.createTextNode('复原里程'));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.padding = "7px 10px";
        div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
        div.style.borderRadius = "5px";
        div.style.backgroundColor = "yellow";
        // 绑定事件,复原里程不需要动轨迹
        div.onclick = async function (e) {
          //const allOverlay = window.map.getOverlays();
          // window.map.clearOverlays();
          // //window.lushu = {};

          // if (window.routepath.length > 0) {
          //   const oldline = new window.BMapGL.Polyline(window.routepath, { strokeColor: "blue", strokeWeight: 4, strokeOpacity: 1 });
          //   window.map.addOverlay(oldline);
          // }
          // const allOverlay = window.map.getOverlays();
          // for (var i = 0; i < allOverlay.length; i++) {
          //   if (allOverlay[i].toString().indexOf("Marker") > 0) {//删除车标
          //     window.map.removeOverlay(allOverlay[i]);
          //   }
          // }
          //window.lushu = null;
          const r = await mileagetrigger(path).unwrap();
          setmileage(r.data);
          // console.log(oldline);
        }
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
      }

      //创建控件元素
      const myRecoverCtrl = new RecoverControl();
      //console.log(myRecoverCtrl.getAnchor());
      //添加到地图中
      window.map.addControl(myRecoverCtrl);
      //定义一个控件类
    }
    {
      //定义一个控件类
      function RecoverGPSControl() {
        this.defaultAnchor = window.BMAP_ANCHOR_TOP_RIGHT;
        this.defaultOffset = new window.BMapGL.Size(20, 20)
      }
      //通过JavaScript的prototype属性继承于BMap.Control
      RecoverGPSControl.prototype = new window.BMapGL.Control();
      //console.log(RecoverControl.prototype);
      // RecoverControl.prototype.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;
      //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
      //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
      RecoverGPSControl.prototype.initialize = function (map) {
        //创建一个dom元素
        let div = document.createElement('div');
        //添加文字说明
        div.appendChild(document.createTextNode('复原轨迹'));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.padding = "7px 10px";
        div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
        div.style.borderRadius = "5px";
        div.style.backgroundColor = "yellow";
        // 绑定事件,点击一次放大两级
        div.onclick = async function (e) {
          //const allOverlay = window.map.getOverlays();
          window.map.clearOverlays();
          //window.lushu = {};
          const r = await gpstrigger(path).unwrap();
          //console.log(r);
          //判断是否为数组，如果不是数组说明有误
          if (Array.isArray(r.data)) {
            const lat = r.data[0];
            const lon = r.data[1];
            let gpspoint = [];
            for (var i = 0; i < lat.length; i++) {
              //lat,lon顺序不要搞错，反了的话就会到海里去了，这个检查起来很崩溃
              gpspoint.push(new window.BMapGL.Point(lon[i], lat[i]));
            }
            // const translateCallback = function (data) {
            //   if (data.status === 0) {
            //     const line = new window.BMapGL.Polyline(data.points, { strokeColor: "blue", strokeWeight: 4, strokeOpacity: 1 });
            //     window.map.addOverlay(line);
            //   }
            // }
            // const convertor = new window.BMapGL.Convertor();
            // convertor.translate(gpspoint, 1, 5, translateCallback);

            const gpsline = new window.BMapGL.Polyline(gpspoint, { strokeColor: "blue", strokeWeight: 4, strokeOpacity: 1 });
            window.map.addOverlay(gpsline);
            window.lushu = null;
          }
        }
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
      }

      //创建控件元素
      const myRecoverGPS = new RecoverGPSControl();
      //console.log(myRecoverCtrl.getAnchor());
      //添加到地图中
      window.map.addControl(myRecoverGPS);
      //定义一个控件类
    }

  }, []);
  useEffect(() => {
    if (hubConnection) {
      hubConnection
        .start()
        .then(() => {
          console.log('SignalR Connected!');
        })
        .catch((err) => {
          console.log('SignalR Connection Error: ', err);
        });
    }

    return () => {
      // 4.组件卸载时，断开 SignalR 连接

      if (hubConnection) {

        hubConnection.stop()
          .then(() => {
            console.log('SignalR Disconnected!');
          })
          .catch((err) => {
            console.log('SignalR Disconnection Error: ', err);
          });
      }
    };

  }, [hubConnection]);

  useEffect(() => {
    hubConnection?.on('csvfileinfo', (chartall, name, spdavg, sdsent, countsent, watchpath) => {
      if (watchpath === path) {
        //console.log("hubConnection");
        setfilname(name);
        setcount(countsent);
        setmileage(sdsent);
        setspdavg(spdavg);
        const lat = chartall[0];
        const lon = chartall[1];
        let point = [];
        for (var i = 0; i < lat.length; i++) {
          //lat,lon顺序不要搞错，反了的话就会到海里去了，这个检查起来很崩溃
          point.push(new window.BMapGL.Point(lon[i], lat[i]));
        }
        // if (countsent < 4000) {
        //   const geocoder = new window.BMapGL.Geocoder();
        //   geocoder.getLocation(point[0], function (rs) {
        //     const addComp = rs.addressComponents;
        //     const address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
        //     setaddress(address);
        //   });
        // }

        const line = new window.BMapGL.Polyline(point, { strokeColor: "blue", strokeWeight: 4, strokeOpacity: 1 });
        window.map.addOverlay(line);
        window.routepath = window.routepath.concat(point);
        // window.map.setViewport(data.points);
        if (window.lushu === null) {
          window.lushu = new window.BMapGLLib.LuShu(window.map, point, {
            /* defaultContent: _vehicleID,*/
            autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
            icon: window.caricon,
            enableRotation: true, //是否设置marker随着道路的走向进行旋转
            speed: 1500, //速度很有关系，太快和太慢都会导致车标原地不动
            landmarkPois: []
          });

          window.lushu.start();
        }
        else {
          window.lushu.goPath(point);
          //window.lushu.start();

        }



        //坐标转换完之后的回调函数
        // const translateCallback = function (data) {
        //   if (data.status === 0) {
        //     const geocoder = new window.BMapGL.Geocoder();
        //     geocoder.getLocation(data.points[0], function (rs) {
        //       const addComp = rs.addressComponents;
        //       const address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
        //       setaddress(address);
        //     });



        //     const line = new window.BMapGL.Polyline(data.points, { strokeColor: "blue", strokeWeight: 4, strokeOpacity: 1 });
        //     window.map.addOverlay(line);
        //     window.routepath = window.routepath.concat(data.points);
        //     // window.map.setViewport(data.points);
        //     if (window.lushu === null) {
        //       window.lushu = new window.BMapGLLib.LuShu(window.map, data.points, {
        //         /* defaultContent: _vehicleID,*/
        //         autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        //         icon: window.caricon,
        //         enableRotation: true, //是否设置marker随着道路的走向进行旋转
        //         speed: 1500, //速度很有关系，太快和太慢都会导致车标原地不动
        //         landmarkPois: []
        //       });

        //       window.lushu.start();
        //     }
        //     else {
        //       window.lushu.goPath(data.points);
        //       //window.lushu.start();

        //     }

        //   }
        // }

        //const convertor = new window.BMapGL.Convertor();
        //convertor.translate(point, 1, 5, translateCallback);

        setchart1chan1(chartall[2]);
        setchart1chan2(chartall[3]);
        setchart1chan3(chartall[4]);
        setchart1chan4(chartall[5]);

        setchart2chan1(chartall[6]);
        setchart2chan2(chartall[7]);
        setchart2chan3(chartall[8]);
        setchart2chan4(chartall[9]);

        setchart3chan1(chartall[10]);
        setchart3chan2(chartall[11]);
        setchart3chan3(chartall[12]);
        setchart3chan4(chartall[13]);

        setchart4chan1(chartall[14]);
        setchart4chan2(chartall[15]);
        setchart4chan3(chartall[16]);
        setchart4chan4(chartall[17]);

        setchart5chan1(chartall[18]);
        setchart5chan2(chartall[19]);
        setchart5chan3(chartall[20]);
        setchart5chan4(chartall[21]);

        setchart6chan1(chartall[22]);
        setchart6chan2(chartall[23]);
        setchart6chan3(chartall[24]);
        setchart6chan4(chartall[25]);

      }




    });
    hubConnection?.on('loginfo', (logwatchpath, res) => {
      if (logpath === logwatchpath) {
        //打开悬浮按钮
        setbuttonOpen(true);
        setLoginfo(res);
      }

    });
    hubConnection?.on('csvexception', (watchpath, res) => {
      if (path === watchpath) {
        //打开悬浮按钮
        setbuttonOpen(true);
        setLoginfo(res);
      }

    });
    hubConnection?.on('logexception', (logwatchpath, res) => {
      if (logpath === logwatchpath) {
        //打开悬浮按钮
        setbuttonOpen(true);
        setLoginfo(res);
      }

    });
  }, [hubConnection]);


  // 3.使用 hub 的 on 方法来监听服务器上的事件



  let option1 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        fontSize: 8,
        color: "#4c9bfd"
      },
      left: 'center',
      itemHeight: 8,//图例图标的高度
      itemWidth: 8,//图例图标的宽度
      // 这个10% 必须加引号
      // type: 'scroll',
      // orient: 'horizontal' 
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,

      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: chart1chantitle[0],
        data: chart1chan1,
        type: 'line',
        smooth: true,
      },
      {
        name: chart1chantitle[1],
        type: "line",
        smooth: true,
        data: chart1chan2
      },
      {
        name: chart1chantitle[2],
        type: "line",
        smooth: true,
        data: chart1chan3
      },
      {
        name: chart1chantitle[3],
        type: "line",
        smooth: true,
        data: chart1chan4
      },
    ]
  };

  let option2 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        fontSize: 8,
        color: "#4c9bfd"
      },
      left: 'center',
      itemHeight: 8,//图例图标的高度
      itemWidth: 8,//图例图标的宽度
      // 这个10% 必须加引号
      // type: 'scroll',
      // orient: 'horizontal' 
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,

      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: chart2chantitle[0],
        data: chart2chan1,
        type: 'line',
        smooth: true,
      },
      {
        name: chart2chantitle[1],
        type: "line",
        smooth: true,
        data: chart2chan2
      },
      {
        name: chart2chantitle[2],
        type: "line",
        smooth: true,
        data: chart2chan3
      },
      {
        name: chart2chantitle[3],
        type: "line",
        smooth: true,
        data: chart2chan4
      },
    ]
  };

  let option3 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        fontSize: 8,
        color: "#4c9bfd"
      },
      left: 'center',
      itemHeight: 8,//图例图标的高度
      itemWidth: 8,//图例图标的宽度
      // 这个10% 必须加引号
      // type: 'scroll',
      // orient: 'horizontal' 
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",

      boundaryGap: false,

      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: chart3chantitle[0],
        data: chart3chan1,
        type: 'line',
        smooth: true,
      },
      {
        name: chart3chantitle[1],
        type: "line",
        smooth: true,
        data: chart3chan2
      },
      {
        name: chart3chantitle[2],
        type: "line",
        smooth: true,
        data: chart3chan3
      },
      {
        name: chart3chantitle[3],
        type: "line",
        smooth: true,
        data: chart3chan4
      },
    ]
  };

  let option4 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        fontSize: 8,
        color: "#4c9bfd"
      },
      left: 'center',
      itemHeight: 8,//图例图标的高度
      itemWidth: 8,//图例图标的宽度
      // 这个10% 必须加引号
      // type: 'scroll',
      // orient: 'horizontal' 
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",

      boundaryGap: false,

      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: chart4chantitle[0],
        data: chart4chan1,
        type: 'line',
        smooth: true,
      },
      {
        name: chart4chantitle[1],
        type: "line",
        smooth: true,
        data: chart4chan2
      },
      {
        name: chart4chantitle[2],
        type: "line",
        smooth: true,
        data: chart4chan3
      },
      {
        name: chart4chantitle[3],
        type: "line",
        smooth: true,
        data: chart4chan4
      },
    ]
  };

  let option5 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        fontSize: 8,
        color: "#4c9bfd"
      },
      left: 'center',
      itemHeight: 8,//图例图标的高度
      itemWidth: 8,//图例图标的宽度
      // 这个10% 必须加引号
      // type: 'scroll',
      // orient: 'horizontal' 
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,

      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: chart5chantitle[0],
        data: chart5chan1,
        type: 'line',
        smooth: true,
      },
      {
        name: chart5chantitle[1],
        type: "line",
        smooth: true,
        data: chart5chan2
      },
      {
        name: chart5chantitle[2],
        type: "line",
        smooth: true,
        data: chart5chan3
      },
      {
        name: chart5chantitle[3],
        type: "line",
        smooth: true,
        data: chart5chan4
      },
    ]
  };

  let option6 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        fontSize: 8,
        color: "#4c9bfd"
      },
      left: 'center',
      itemHeight: 8,//图例图标的高度
      itemWidth: 8,//图例图标的宽度
      // 这个10% 必须加引号
      // type: 'scroll',
      // orient: 'horizontal' 
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,

      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: chart6chantitle[0],
        data: chart6chan1,
        type: 'line',
        smooth: true,
      },
      {
        name: chart6chantitle[1],
        type: "line",
        smooth: true,
        data: chart6chan2
      },
      {
        name: chart6chantitle[2],
        type: "line",
        smooth: true,
        data: chart6chan3
      },
      {
        name: chart6chantitle[3],
        type: "line",
        smooth: true,
        data: chart6chan4
      },
    ]
  };


  return (
    <>
      {buttonopen ? (<FloatButton
        icon={<QuestionCircleOutlined />}

        tooltip={<div>单击显示错误信息</div>}
        type="primary"
        badge={{
          dot: true,
        }}
        style={{

          right: 94,
        }}
        onClick={openDrawer}
      />) : ''}

      <Drawer title="边缘计算机日志错误信息" onClose={onDrawerClose} open={draweropen}>
        <p>{loginfo}</p>

      </Drawer>

      <div className='body'>

        <header>
          <div className="showfilename" id="filename">{filename}</div>
          <h1 id="title">
            {userlist ? userlist[2] : "全球路谱采集"}: {userlist ? userlist[0] + userlist[1] : ""}
            {buttonopen ? (<Tag color="#cd201f">
              日志错误
            </Tag>) : ''}
          </h1>

          <div className="showTime">当前时间：{showtime}</div>
          <div className="showreadtimes">{count}</div>
          <script>

          </script>
        </header>
        <section className="mainbox">
          <div className="column">
            <div className="panel line1">
              <h2 id="chart1_h2">{userlist ? userlist[3] : "轮心加速度X"}</h2>
              <div className="chart">
                <ReactECharts option={option1} style={{ width: '100%', height: '100%' }} />
              </div>
              <div className="panel-footer"></div>
            </div>
            <div className="panel line2">
              <h2 id="chart2_h2">{userlist ? userlist[4] : "轮心加速度Y"}</h2>
              <div className="chart">
                <ReactECharts option={option2} style={{ width: '100%', height: '100%' }} />
              </div>
              <div className="panel-footer"></div>
            </div>
            <div className="panel line3">
              <h2 id="chart3_h2">{userlist ? userlist[5] : "轮心加速度Z"}</h2>
              <div className="chart">
                <ReactECharts option={option3} style={{ width: '100%', height: '100%' }} />
              </div>
              <div className="panel-footer"></div>
            </div>
          </div>
          <div className="column">
            <div className="no">
              <div className="no-hd">
                <ul>
                  <li id="speed">{spdavg.toFixed(0)}</li>
                  <li id="milege">{mileage.toFixed(2)}</li>
                </ul>
              </div>
              <div className="no-bd">
                <ul>
                  <li>实时车速（km/h）</li>
                  <li>总里程数（km）</li>
                </ul>
              </div>
            </div>
            <div className="mg">
              <div className="mulan"></div>

            </div>
            <div className="map">
              <div className="chart" id="MapContainer">
                {/* <Map style={{ height: '100%' }} center={{ lng: 121.472644, lat:  31.231706 }} zoom="11" enableScrollWheelZoom ref={ref => {this.map = ref.map}} /> */}
                {/* <Map style={{ height: '100%' }} center={new window.BMapGL.Point(121.472644, 31.231706)} zoom="11" enableScrollWheelZoom /> */}
              </div>

            </div>
          </div>
          <div className="column">
            <div className="panel line4">
              <h2 id="chart4_h2">{userlist ? userlist[6] : "塔柱加速度X"}</h2>
              <div className="chart">
                <ReactECharts option={option4} style={{ width: '100%', height: '100%' }} />
              </div>
              <div className="panel-footer"></div>
            </div>
            <div className="panel line5">
              <h2 id="chart5_h2">{userlist ? userlist[7] : "塔柱加速度Y"}</h2>
              <div className="chart">
                <ReactECharts option={option5} style={{ width: '100%', height: '100%' }} />
              </div>
              <div className="panel-footer"></div>
            </div>
            <div className="panel line6">
              <h2 id="chart6_h2">{userlist ? userlist[8] : "塔柱加速度Z"}</h2>
              <div className="chart">
                <ReactECharts option={option6} style={{ width: '100%', height: '100%' }} />
              </div>
              <div className="panel-footer"></div>
            </div>
          </div>
        </section>
      </div>
    </>
  )
}

export default BeginMonitor